$.widget("tempo.tagsinput", {
    options: {
        data: [],//接受传入的对象数组,
        title: 'tagsInputTitle',//tagsinput标签显示的变量,
        width: '300px',
        height: '300px',
        id: '',
        background: {
            hidden: true,
            color: '#e1efff',
        },
        border:{
            hidden: true,
            style:'none'
        },
    },
    //初始化创建方法
    _create:function() {
        //判断调用tabs组件的元素是不是DIV
        if(this.element.prop("nodeName") != "DIV") {
            alert("调用tagsinput组件的元素必须是div");
            return;
        }

        //生成id
        this.options.id = 'tags' + new Date().getTime();

        var data = {
            target_div: '#' + this.options.id + '_tagsinput',
        };

        //生成tags布局div并插入到调用tagsinput组件元素的div中
        var markup = '<div id="'+this.options.id+'_tagsinput" class="tagsinput"></div>';
        $(markup).appendTo(this.element);

        //给tagsinput赋长度和宽度
        $(data.target_div).css('width',this.options.width);
        $(data.target_div).css('min-height',this.options.height);
        $(data.target_div).css('height',this.options.height);
        if(!this.options.border.hidden){
            $(data.target_div).css('border',this.options.border.style);
        }

        if(this.options.data.length != 0) {//data中有值
            this._importTags(this.options.data, data.target_div);
        }
    },

    //导入标签
    _importTags: function(data, parentDivId) {
        for(var i = 0; i < data.length; i++) {
            this.addTag(data[i], parentDivId);
        }
    },

    //增加标签
    addTag: function(value, parentDivId) {
        if(!parentDivId) {
            parentDivId = '#' + this.options.id + '_tagsinput'
        }
        //展示的标签页中的内容
        var tagsinputTitle = value[this.options.title];
        tagsinputTitle = this._encodeHTML(tagsinputTitle);
        var skipTag = false;
        //判断是否唯一的
        skipTag = this.tagExist(tagsinputTitle);
        var that = this;
        if (value !='' && skipTag != true) {
            var tagSpan = $('<span id=tag-' + tagsinputTitle + '>').addClass('tag').append(
                $('<span>').text(this._decodeHTML(tagsinputTitle)).append('&nbsp;&nbsp;'),
                $('<a>', {
                    href  : '#',
                    title : '移除汇总组',
                    text  : 'x'
                }).click(function () {
                    return that.removeTag(tagSpan);
                })
            ).appendTo($(parentDivId));
            tagSpan.data("content", value);
            if(!this.options.background.hidden){
                tagSpan.css("background", this.options.background.color);
            }
        }
    },

    //删除标签
    removeTag: function(tagSpan) {
        tagSpan.remove();
    },
    //修改标签
    updateTag: function(title, data) {
        var id = 'tag-'+ title;
        id = this._encodeHTML(id);
        var targetTag = this.element.find("span[id='"+ id +"']");
        if(targetTag.length > 0) {
            var text = targetTag.find('span').text();
            targetTag.attr("id", 'tag-'+data.title);
            targetTag.find('span').text(text.replace(this._decodeHTML(title), data.title));
            targetTag.data("content", data);
        }
    },
    //删除所有标签
    removeTagAll: function() {
        $('#' + this.options.id + '_tagsinput').empty();
    },
    //判断标签是否已经存在
    tagExist: function(val) {
        var tags = this.element.find('.tag');
        for(var i = 0; i < tags.length; i++) {
            var tagsinputTitle = $(tags[i]).data("content")[this.options.title];
            tagsinputTitle = this._encodeHTML(tagsinputTitle);
            if(val === tagsinputTitle) {
                return true;
            }
        }
        return false;
    },
    //获取所有的标签数据
    getAllTagData: function() {
        var tags = this.element.find('.tag');
        var data = [];
        for(var i = 0; i < tags.length; i++) {
            var value = $(tags[i]).data("content");
            data.push(value);
        }
        return data;
    },

    _destroy: function() {

        $(".tagsinput").remove();
    },

    _encodeHTML:function(val){
        if(val){
            val = val.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/'/g,"&apos;").replace(/"/g,"&quot;");
        }
        return val;
    },
    _decodeHTML:function(val){
        if(val){
            val = val.replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&apos;/g,"'").replace(/&quot;/g,"\"");
        }
        return val;
    },

});